<template>
 <div class="components">
     <p>两个按钮是同一个组件</p>
     <mbtn
        btnName="点我弹窗"
        btnType="middle"
        @onsubmitSub='showalert'
     ></mbtn>

     <!-- 不推荐，点到padding也会生效 -->
     <mbtn
        btnName="点我弹窗"
        btnType="big"
        @click.native='showalert'
     ></mbtn>
     <mbtn
        :btnName="btnname"
        btnType="middle"
        @onsubmitSub='showdrop'
     >
      <transition name="drop"  slot="drop">
       <drop v-if="dropshow" @oncl='cl'></drop>
      </transition>
     </mbtn>
     <alert
        title="标题"
        content="内容"
        btnName="是的"
        btnName2="不是"
        @onconfirm='confirm'
        @oncancel='cancel'
        v-if="alertshow1"
     ></alert>
     <alert
        title="恭喜！"
        content="回答正确！！！"
        btnName="好的"
        @onconfirm='confirm2'
        v-if="alertshow2"
     ></alert>
     <alert
        title="警告！！！"
        content="点不动了哇？？？你以为你点不是就没事了？？？"
        btnName="好吧！是傻逼"
        @onconfirm='confirm3'
        v-if="alertshow3"
     ></alert>
     <div class="bottombtn">
         <mbtn
        btnName="返回上一页"
        btnType="big"
        @onsubmitSub='goback'
     ></mbtn>
     <div class= "" v-if="show5">
		1111
	</div>
     </div>
	
 </div>
</template>

<script>
import alert from "../components/Bigalert";
import mbtn from "../components/mBtn";
import drop from "../components/dropList";
export default {
  name: "components",
  data() {
    return {
      alertshow1: true,
      alertshow2: false,
      alertshow3: false,
      stutes: true,
      dropshow:false,
      btnname:'点我弹下拉',
      show5: false
    };
  },
  methods: {
    cl(e){
      this.btnname = e=='恢复默认' ? '点我弹下拉' : e ;
      this.dropshow=false;
    },
    showdrop(){
      this.dropshow = this.dropshow ? false : true;
    },
    confirm3() {
      this.alertshow3 = false;
      this.stutes = true;
    },
    showalert() {
	
      if (this.stutes) {
        this.alertshow1 = true;
      } else {
        return;
      }
    },
    confirm() {
      this.alertshow1 = false;
      this.alertshow2 = true;
    },
    cancel() {
      this.alertshow1 = false;
      this.stutes = false;
      setTimeout(() => {
        this.alertshow3 = true;
      }, 3000);
    },
    confirm2() {
      this.alertshow2 = false;
    },
    goback() {
      if (this.stutes) {
        this.$router.go(-1);
      } else {
        return;
      }
    }
  },
  components: {
    alert,
    mbtn,
    drop
  }
};
</script>

<style scoped lang="scss">
@import "../styles/common.scss";
.components {
  > p:first-child {
    font-size: px2rem(32);
    text-align: center;
  }
  .bottombtn {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.drop-enter,.drop-leave-to{
  opacity: 0;
}
.drop-enter-active,.drop-leave-active{
  transition:all .3s linear;
}
.drop-enter-to,.drop-leave{
  opacity: 1;
}
</style>
